<template>
	<view class="content">
		<view class="classiftTOP">
			<view class="classiftTOPl">
				<view class="classiftTOPln classiftBut">男生</view>
				<view class="classiftTOPlv">女生</view>
			</view>
			<view class="classiftTOPr"><img :src="srca" class="classiftTOPri" /></view>
		</view>
		<view class="classiftBtt" id="asa">
			<view class="classiftBttL">
				<view class="classiftBttLtit" v-for="(topical, index) in allCategories.allCategories" :key="index" :class="{ classiftBttLtitO: index == 1 }">
					{{ topical.name }}
				</view>
			</view>
			<view class="classiftBttR">
				<view class="classiftBttRTop" />
				<view class="classiftC" v-for="(categories, index) in allCategories.allCategories" :key="index">
					<view class="classiftCT" :id="categories.id">
						{{ categories.name }}
					</view>
					<scroll-view class="scroll-view_H stickyScroll" scroll-x="true">
						<view class="scroll-view-item_H" v-for="(categoriesItems, index) in categories.items" :key="index" :class="{ 'scroll-view-item_HO': index == '0' }">
							{{ categoriesItems.name }}
						</view>
					</scroll-view>
					<view class="classiftCC" v-for="(categoriesName, index) in categories.items" :key="index">
						<view class="classiftCT" :id="categoriesName.id">
							{{ categoriesName.name }}
						</view>
						<view class="classiftCCI" v-if="categoriesName.status == 3">
							<view class="classiftCCIft" v-for="(categoriesNameItems, index) in categoriesName.items" :key="index">
								{{ categoriesNameItems.name }}
							</view>
						</view>
						<view class="classiftCCI" v-if="categoriesName.status == 2">
							<view class="classiftCCIift" v-for="(categoriesNameItemss, index) in categoriesName.items" :key="index">
								<view class="classiftCCIiftL"><img :src="categoriesNameItemss.icon" class="classiftCCIiftLi" /></view>
								<view class="classiftCCIiftR">{{ categoriesNameItemss.name }}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
// status
// * 状态 1 items内上滚动播放
// * 状态 2 items内图片加分类
// * 状态 3 items内直接分类
// * 状态 4 items内没有东西
import allCategories from '@/assets/json/classify/allCategories.json';
export default {
	data() {
		return {
			srca: require('static/images/home/search.png'),
			allCategories: allCategories
		};
	},
	onLoad() {},
	onReady() {
		this.$nextTick(function() {});
		setTimeout(() => {
			let query = uni.createSelectorQuery().in(this);
			console.log(query);
			query
				.select('#asa')
				.boundingClientRect(data => {
					console.log(data);
				})
				.exec();
		}, 1000);
	},
	methods: {
		getNodesInfo() {
			const query = uni.createSelectorQuery().in(this);
			query
				.selectAll('.productTitle')
				.boundingClientRect()
				.exec(res => {
					console.log(res);
					let nodes = res[0];
					let arr = [];
					nodes.map(item => {
						arr.push(item.top);
					});
					this.topList = arr;
					console.log(this.topList);
				});
		}
	},
	onPageScroll(e) {
		console.log(e.scrollTop);
	}
};
</script>

<style lang="less">
.content {
	position: relative;
	background-color: #fafafa;
}
.classiftTOP {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	width: 100vw;
	height: 25vw;
	box-sizing: border-box;
	background-color: #fafafa;
	padding-bottom: 5vw;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1000;
	.classiftTOPl {
		display: flex;
		justify-content: space-around;
		align-items: flex-end;
		width: 30vw;
		font-size: 14px;
		color: #999999;
		.classiftTOPln {
			margin-left: 5vw;
		}
		.classiftBut {
			font-size: 22px;
			color: #000000;
			font-weight: bold;
		}
	}
	.classiftTOPr {
		width: 20px;
		height: 20px;
		margin-right: 5vw;
		.classiftTOPri {
			width: 20px;
			height: 20px;
		}
	}
}
.classiftBtt {
	display: flex;
	justify-content: space-between;
	background-color: #fafafa;
	font-size: 14px;
	margin-top: 25vw;
	.classiftBttL {
		width: 20vw;
		text-align: center;
		font-size: 14px;
		margin-top: 3vw;
		position: fixed;
		top: 25vw;
		left: 0;
		.classiftBttLtit {
			margin-bottom: 4vw;
			font-size: 13px;
			color: #131313;
			border-left: 4px solid #fafafa;
		}
		.classiftBttLtitO {
			color: #e66f3b;
			border-left: 4px solid #e66f3b;
		}
	}
	.classiftBttR {
		width: 80vw;
		background-color: #ffffff;
		border-radius: 10px;
		box-sizing: border-box;
		padding: 3vw 4vw;
		margin-left: 20vw;
		.classiftC {
			.classiftCT {
				font-size: 12px;
				color: #999999;
				margin-top: 3vw;
			}
			.scroll-view_H {
				white-space: nowrap;
				width: 100%;
				margin-top: 2vw;
				background-color: #ffffff;
			}
			// .stickyScroll {
			// 	position: sticky;
			// 	padding-top: 27vw;
			// 	top: 0;
			// 	z-index: 100;
			// 	padding-bottom: 2vw;
			// }
			.scroll-view-item_H {
				display: inline-block;
				padding: 0.2vw 5vw;
				height: 8vw;
				line-height: 8vw;
				margin-right: 3vw;
				text-align: center;
				font-size: 12px;
				border-radius: 4vw;
				color: #999999;
			}
			.scroll-view-item_HO {
				color: #ffffff;
				background-color: #e66e3c;
			}
			.scroll-view_H::-webkit-scrollbar {
				width: 0px;
				height: 0px;
				background-color: rgba(0, 0, 0, 0);
			}

			.scroll-view_H::-webkit-scrollbar-track {
				-webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, 0);
				border-radius: 10px;
				background-color: rgba(0, 0, 0, 0);
			}

			.scroll-view_H::-webkit-scrollbar-thumb {
				border-radius: 10px;
				-webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, 0);
				background-color: rgba(0, 0, 0, 0);
			}
			.classiftCC {
				margin-top: 3vw;
				.classiftCCI {
					display: flex;
					justify-content: space-between;
					flex-wrap: wrap;
					.classiftCCIft {
						width: 20vw;
						text-align: center;
						height: 8vw;
						line-height: 8vw;
						margin-right: 3vw;
						font-size: 12px;
						border-radius: 4vw;
						color: #000000;
						background-color: #f7f7f7;
						margin-top: 2vw;
					}
					.classiftCCIift {
						display: flex;
						justify-content: flex-start;
						align-items: center;
						background-color: #f7f7f7;
						color: #000000;
						width: 30vw;
						height: 10vw;
						line-height: 10vw;
						margin-right: 3vw;
						font-size: 12px;
						border-radius: 5vw;
						margin-top: 4vw;
						box-sizing: border-box;
						padding-left: 3vw;
						.classiftCCIiftL {
							width: 25px;
							height: 25px;
							border-radius: 50%;
							.classiftCCIiftLi {
								width: 25px;
								height: 25px;
								border-radius: 50%;
							}
						}
						.classiftCCIiftR {
							margin-left: 2vw;
						}
					}
				}
			}
		}
	}
}
</style>
